<template>
  <div class="simple-test">
    <el-card>
      <template #header>
        <span>API测试</span>
      </template>
      
      <el-space direction="vertical" style="width: 100%">
        <el-button @click="testBasicApi" type="primary" :loading="loading1">
          测试基础API
        </el-button>
        
        <el-button @click="testReportsApi" type="success" :loading="loading2">
          测试报表API
        </el-button>
        
        <div v-if="result1">
          <h4>基础API结果：</h4>
          <el-alert :title="result1" type="success" />
        </div>
        
        <div v-if="result2">
          <h4>报表API结果：</h4>
          <pre style="background: #f5f5f5; padding: 10px; border-radius: 4px;">{{ result2 }}</pre>
        </div>
        
        <div v-if="error">
          <h4>错误信息：</h4>
          <el-alert :title="error" type="error" />
        </div>
      </el-space>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import request from '@/utils/request'

const loading1 = ref(false)
const loading2 = ref(false)
const result1 = ref('')
const result2 = ref('')
const error = ref('')

const testBasicApi = async () => {
  loading1.value = true
  error.value = ''
  try {
    const response = await request({
      url: '/store/reports/test',
      method: 'get'
    })
    result1.value = response.data
    ElMessage.success('基础API测试成功')
  } catch (err) {
    error.value = `基础API测试失败: ${err.message}`
    ElMessage.error('基础API测试失败')
  } finally {
    loading1.value = false
  }
}

const testReportsApi = async () => {
  loading2.value = true
  error.value = ''
  try {
    const response = await request({
      url: '/store/reports/data',
      method: 'get',
      params: {
        timeType: 'month'
      }
    })
    result2.value = JSON.stringify(response.data, null, 2)
    ElMessage.success('报表API测试成功')
  } catch (err) {
    error.value = `报表API测试失败: ${err.message}`
    ElMessage.error('报表API测试失败')
  } finally {
    loading2.value = false
  }
}
</script>

<style scoped>
.simple-test {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}
</style> 